<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      .bg {
        background-image: url("./static/title.png");
      }
    </style>
  
  </head>
  
  <body>
    <!-- src指定资源位置，title指鼠标移入时的提示信息，alt指加载失败时的提示信息，width和height指宽高 -->
    <img src="./static/title.png"><br><br>
    <img src="./static/title.png" title="提示信息"><br><br>
    <img src="..//title.png" alt="图片无法显示时的描述"><br><br>
    <img src="./static/title.png" width="20px" height="40px"><br><br>
    
    <!-- 标题 -->
    <figure>
      <img src="./static/title.png">
      <figcaption>图片的标题</figcaption>
    </figure>
    
    <!-- 背景 -->
    <div class="bg" style="width: 300px;height: 300px;border: darkgray 1px solid"></div>
    
    <!-- 响应式 -->
    <!-- 1.srcset_sizes：若浏览器以视窗宽度为480来加载页面，那么(max-width: 480px)媒体条件为真，因此440px的槽会被选择，所以./static/title.png将被加载 -->
    <img
      srcset="./static/png.png 320w,
             ./static/title.png 480w,
             ./static/jpg.jpg 800w"
      sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
      src="./static/jpg.jpg"
    >
    <hr>
    <!-- 2.picture -->
    <picture>
      <source media="(min-width: 400px)" srcset="./static/jpg.jpg">
      <source media="(min-width: 800px)" srcset="./static/title.png">
      
      <!-- 媒体添加全为假时加载 -->
      <img src="./static/png.png">
    </picture>
  </body>
</html>